<template>
    <div>
        <el-drawer
            title="风险审批异常警告"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose"
            :wrapperClosable="false"
            :modal="false"
            size="100%"
        >
            <vxe-table
                :header-cell-style="{ padding: '4px 0' }"
                :footer-cell-style="{ padding: '4px 0' }"
                :auto-resize="true"
                :data="instDataSourceList"
                border
                size="mini"
                style="width: 100%"
                v-loading="loading"
                resizable
                :resizable-config="{ minWidth: '60' }"
                show-header-overflow
                ref="xTable1"
            >
                <vxe-column width="120px" field="link" title="链接" show-overflow="tooltip">
                    <template #default="{}">
                        <span style="color:#409eff" @click="handleHref">进入风险审核</span>
                    </template>
                </vxe-column>
                <vxe-column
                    v-for="item in dialogColumns"
                    :key="item.name"
                    :field="item.id"
                    :title="item.content"
                    :width="item.width"
                    :min-width="item.minWidth || '100px'"
                    show-overflow="tooltip"
                >
                    <template #default="{ row }">
                        <span v-if="item.type == 'func'">
                            {{ item.funcBody(row[item.id], row) }}
                        </span>
                        <span v-else-if="item.type == 'statusTag'">
                            <StatusTag :code="row[item.id]"></StatusTag>
                        </span>
                        <span v-else>
                            {{ row[item.id] && (row[item.id] + '').trim() ? row[item.id] : '--' }}
                        </span>
                    </template>
                </vxe-column>
            </vxe-table>
            <risk-pagination :paging="pageDialog" @page-change="pageQueryDialog"></risk-pagination>
        </el-drawer>
    </div>
</template>
<script lang="ts">
import RiskPagination from '@/common/components/risk-pagination.vue';
import StatusTag from '@/pages/risk-measure/components/status-tag.vue';
import { getSystem } from '@/utils/user-util';
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({ name: 'InstApprovalDialog', components: { StatusTag, RiskPagination } })
export default class InstApprovalDialog extends Vue {
    @Prop({ default: false }) drawer: boolean;
    private pageDialog: pages = {
        total: 0,
        currentPage: 1,
        pageSize: 5,
    };

    approveStatusType = {
        '0': '未审批',
        '1': '成功',
        '2': '失败',
        '3': '有警告',
    };

    approveResultTrans = {
        '0': '未审批',
        '1': '审批通过',
        '2': '审批拒绝',
    };
    instDataSourceList: any[] = []; // 表格数据

    dialogColumns: any[] = [
        { content: '指令序号', id: 'instNo' },
        { content: '恒生指令序号', id: 'dailyInstructionNo', minWidth: 100 },

        {
            content: '审批状态',
            id: 'approveStatus',
            type: 'func',
            funcBody: value => value && this.approveStatusType[value],
        },
        { content: '审批结果', id: 'approveResult', type: 'func', funcBody: value => value && this.approveResultTrans[value] },
        { content: '合规结果', id: 'complianceResult', type: 'statusTag' },
        { content: '产品名称', id: 'fundNameSt' },
        { content: '组合名称', id: 'fdAcName' },
        { content: '证券代码', id: 'stockCode', minwidth: 130 },
        { content: '证券名称', id: 'stockNameSt', minwidth: 150 },
    ];
    TimeSendMessage = null;

    // 获取"失败"或"警告"数据
    handleDialog() {
        this.handle();
        this.clearTimeSendMessage();

        let value = Number(getSystem().find(item => item.paramKey == 'AUTO_APPROVE_TIMING_INTERVAL').paramValue) || 10;

        this.TimeSendMessage = setInterval(() => {
            this.handle('autoRefresh');
        }, value * 60 * 1000);
    }

    // 清除定时器
    clearTimeSendMessage() {
        this.TimeSendMessage && clearInterval(this.TimeSendMessage);
        this.TimeSendMessage = null;
    }

    beforeDestory() {
        this.clearTimeSendMessage();
    }

    handle(operateType?: string) {
        // this.$axios
        //     .post('/instruction/bypass/list/v1', {
        //         paging: this.pageDialog,
        //         approveStatusList: ['2', '3'],
        //     })
        this.$axios({
            url: '/instruction/bypass/list/v1',
            method: 'post',
            data: { paging: this.pageDialog, approveStatusList: ['2', '3'] },
            headers: { operateType: operateType },
        })
            .then((res: any) => {
                if (res.list && res.list.length) {
                    this.pageDialog.total = res.total;
                    this.instDataSourceList = res.list;
                    this.$emit('update:drawer', true);
                }
            })
            .catch(() => {
                this.pageDialog.total = 0;
                this.instDataSourceList = [];
            });
    }

    timeOutMessage = null;
    @Watch('drawer', { immediate: true })
    handleDrawer() {
        if (this.drawer) {
            this.timeOutMessage && clearTimeout(this.timeOutMessage);
            this.timeOutMessage = setTimeout(() => {
                this.handleClose();
            }, 2 * 60 * 1000);
        }
    }

    // 弹框出现
    handleClose() {
        this.$emit('update:drawer', false);
    }

    // 后端分页(弹框)
    private pageQueryDialog(): void {
        this.handleDialog();
    }

    handleHref() {
        this.$emit('handleHref');
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-drawer__wrapper {
    top: calc(100vh - 245px) !important;
    left: 66%;
    .el-drawer__header {
        padding: 6px 8px;
        background: red;
        color: #4b4343;
        font-weight: bolder;
        margin-bottom: 0px;
    }
}
/deep/ .vxe-table {
    .vxe-table--body-wrapper.body--wrapper {
        height: 125px;
    }
}
</style>
